<template>
    <div class="sidebar">
        <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" theme="dark" unique-opened router>
          <!-- <template v-for="item in items">
              <template v-if="item.subs">
                  <el-submenu :index="item.index">
                      <template slot="title">
                          <i :class="item.icon"></i>{{ item.title }}</template>
                      <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">{{ subItem.title }}
                      </el-menu-item>
                  </el-submenu>
              </template>
              <template v-else>
                  <el-menu-item :index="item.index">
                      <i :class="item.icon"></i>{{ item.title }}
                  </el-menu-item>
              </template>
          </template> -->

          <el-submenu v-for="(item,index) in items" :key="index" :index="item.index">
            <template slot="title">
                <i :class="item.icon"></i>{{ item.title }}</template>
            <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">{{ subItem.title }}
            </el-menu-item>
          </el-submenu>
        </el-menu>
    </div>
</template>

<script>
export default {
    data() {
        return {
            items: [
                {
                    icon: 'el-icon-menu',
                    index: '1',
                    title: '系统',
                    subs: [
                        {
                            index: 'frontUser',
                            title: '前端用户管理'
                        },
                        {
                            index: 'users',
                            title: '用户列表'
                        },
                        {
                            index: 'roles',
                            title: '角色列表'
                        },
                        {
                            index: 'organization',
                            title: '机构列表'
                        },

                    ]
                },
                {
                    icon: 'el-icon-date',
                    index: '2',
                    title: '专家',
                    subs: [
                        {
                            index: 'expert',
                            title: '专家列表'
                        },
                        {
                            index: 'domain',
                            title: '领域管理'
                        }
                    ]
                },
                {
                    icon: 'el-icon-menu',
                    index: '3',
                    title: '文章',
                    subs: [
                        {
                            index: 'article',
                            title: '新增/修改'
                        },
                        {
                            index: 'articleType'
                            , title: '栏目设置'
                        }, {
                            index: 'articlelist',
                            title: '发布列表'
                        }

                    ]
                }, {
                    icon: 'el-icon-menu',
                    index: '4',
                    title: '图片视频',
                    subs: [
                        {
                            index: 'indexpic',
                            title: '专题位图片管理'
                        },
                        {
                            index: 'video',
                            title: '音视频栏目管理'
                        }
                    ]
                }, {
                    icon: 'el-icon-menu',
                    index: '5',
                    title: '合作单位',
                    subs: [
                        {
                            index: 'friend',
                            title: '合作单位'
                        }
                    ]
                }, {
                    icon: 'el-icon-menu',
                    index: '6',
                    title: '系统',
                    subs: [
                        {
                            index: 'opeartion',
                            title: '操作记录'
                        },
                        {
                            index: 'setting',
                            title: '其他设置'
                        }
                    ]
                },
                {
                    icon: 'el-icon-bell',
                    index: '7',
                    title: '公告管理',
                    subs: [
                        {
                            index: 'notice',
                            title: '公告列表'
                        },
                    ]
                },
                {
                    icon: 'el-icon-date',
                    index: '8',
                    title: '课题管理',
                    subs: [
                        {
                            index: 'project',
                            title: '课题列表'
                        },
                        {
                            index: 'projectType',
                            title: '课题分类'
                        }
                    ]
                },
                {
                    icon: 'el-icon-download',
                    index: '9',
                    title: '文件下载管理',
                    subs: [
                        {
                            index: 'downloadList',
                            title: '下载文件列表'
                        }
                    ]
                }

            ]
        }
    },
    computed: {
        onRoutes() {
          return this.$route.path.replace('/', '');
        }
    }
}
</script>

<style scoped>
.sidebar {
  display: block;
  position: absolute;
  width: 250px;
  left: 0;
  top: 70px;
  bottom: 0;
  background: #2e363f;
}
.sidebar > ul {
  height: 100%;
}
</style>
